<script setup>
import { ref } from 'vue';
import Sidebar from'@/layouts/sidebar/sidebar.vue'
import MainContent from'@/layouts/main/contentMain.vue'
import Navigation from'@/layouts/nav/navigation.vue'

const isCollapse=ref(false);

</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-aside class="app_sidebar">
          <Sidebar v-model:isCollapse="isCollapse"/>
      </el-aside>
      <el-container>
        <el-header class="app_navigation">
          <Navigation v-model:isCollapse="isCollapse"/>
        </el-header>       
        <el-main class="app_main">
          <MainContent />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped lang="scss">
.app_sidebar{
  width:auto ;
  box-shadow: 4px 0px 4px rgba(204, 204, 204, 0.3);
}

.app_navigation{
  padding: 4px 0;
  height: 56px;
  box-shadow: 0px 4px 4px rgba(204, 204, 204, 0.3);
}

.app_main{
  padding: 10px;
  height: calc(100vh - 56px);
}

</style>